import React, { Component } from 'react';
import "../styles/Jiaoyutoutiao.scss"
import { NavBar, SearchBar, Space } from 'antd-mobile'
import { SearchOutline, MoreOutline} from 'antd-mobile-icons'
import * as service from '../api/index'

class Jiaoyutoutiao extends Component {
    constructor(props) {
        super(props)
        this.state = {
          right: (
            <div style={{ fontSize: 24 }}>
              <Space style={{ '--gap': '16px' }}>
                <SearchOutline />
                <MoreOutline />
              </Space>
            </div>
          ),
          jiaoyutoutt:[]
        }
      }
     async componentDidMount(){
        var res=await service.user_jiaoyutoutt()
        this.setState({jiaoyutoutt:res.data})
      }
    render() {
        return (
            <div className='jiaoyu'>
               <NavBar  right={this.state.right} onBack={()=>{this.props.history.go(-1)}}>
                    教育头条
                </NavBar>
                <div className='shuru'>
                <SearchBar placeholder='搜索课程/头条/活动'/>
                </div>
                <div className="nei">
                    {
                        this.state.jiaoyutoutt.map((item,index)=>{
                            return (
                                <div className='item' key={index}>
                                    <div className="name">{item.name}</div>
                                    <div className="text">{item.text}</div>
                                    <div className="pic"><img src={item.pic} alt="" /></div>
                                    <div className="han">
                                        <div className="left">
                                            <span className='zan'>{item.zan}赞</span>
                                            <span>{item.cang}收藏</span>
                                        </div>
                                        <div className="right">{item.day}</div>

                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Jiaoyutoutiao;